<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>商品详情</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>

	<body>
		<div class="container" style="padding-top: 100px;" >
		<h1 style="text-align: center;color: #7266ba;">商品详情</h1>
		<button id="toItemList" type="button" class="btn btn-success">商品列表</button>
		<button id="toLogin" type="button" class="btn btn-default">去登录</button><br>
		<h4 id="daojishi" style="color: red;">活动倒计时</h4>
		<h4 id="hdprice" style="color: red;">活动价格</h4>
		<h4 id="djs" style="color: red;">倒计时</h4>
		<div class="row" id="item">
        <div class="col-lg-12">
          <h2>Safari bug warning!</h2>
          <input id="promo_id" type="hidden" value="">
          <img class="img-thumbnail" src="http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/505/505-bigskin-3.jpg" alt="Generic placeholder image" style="width: 100%;">
          <p>Donec sed odio dui. </p>
          <p>剩余库存： </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a>
          </p>
        </div>
        
      </div>
      <button id="createOrder" type="button" class="btn btn-warning">立即下单</button>

		</div>

		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
var context = "";
if (r != null)
context = r[2];
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "" : context;
}
				
				$.ajax({
						type:"get",
						url:"http://127.0.0.1:8090/item/get",
						data:{
							"id":GetQueryString("id")
							},
						async:true,
						xhrFields:{withCredentials:true},
						success:function(data){
						if(data.status=="success"){
							$("#item").empty();
							var items = data.data;
							console.log("数据："+items);
							var html='<div class="col-lg-12"><h2>商品名称：'+items.title+'</h2><input id="promo_id" type="hidden" value="'+items.promoId+'"><img class="img-thumbnail" src="'
							+items.imgUrl
							+'" alt="Generic placeholder image" style="width: 100%;"><p>商品描述：'
							+items.description
							+'</p><p>剩余库存：'
							+items.stock
							+'</p><p>当前销量：'
							+items.sales
							+'</p><p><a class="btn btn-default" href="#" role="button">商品价格：'
							+items.price
							+'</a></p></div>';
							console.log("状态："+items.promoStatus);
						if(items.promoStatus==1){
							//秒杀活动还没有开始
							$("#daojishi").text("秒杀活动将于："+items.startDate+"开始");
							$("#hdprice").text("活动价格："+items.promoPrice);
							//下单按钮禁止调用
							$("#createOrder").attr("disabled",true);
						}else if(items.promoStatus==2){
							//秒杀活动正在进行中
							$("#daojishi").text("秒杀活动正在进行中呀！！！");
							$("#hdprice").text("活动价格："+items.promoPrice);
							//下单按钮启用
							$("#createOrder").attr("disabled",false);
						}
						$("#item").append(html);
						var startTime = items.startDate.replace(new RegExp("-","gm"),"/");
						startTime = (new Date(startTime)).getTime();
						//定时器每秒执行一次
						setInterval(
							function(){
								var nowTime = Date.parse(new Date());
								var delta = (startTime-nowTime)/1000;
								//console.log(delta);
								if(delta<=0){
									//console.log("---------");
									//活动开始了
									$("#daojishi").text("秒杀活动正在进行中呀！！！");
									$("#hdprice").text("活动价格："+items.promoPrice);
									//下单按钮启用
									$("#createOrder").attr("disabled",false);
									$("#djs").css('display','none');
									
								}else{
									$("#djs").text("倒计时："+delta+"秒");
								}
								
							},1000);
						
						}else{
							alert("商品详情失败，原因为"+data.data.Msg);
						}
						},
						error:function(err){
							console.log(err.responseText);
						}
					});
				
				$("#toItemList").on("click",function(){
					window.location.href="itemList.html";
				});
				$("#toLogin").on("click",function(){
					window.location.href="login.html";
				});
				
				
				$("#createOrder").on("click",function(){
					console.log("点击了");
					$.ajax({
						type:"POST",
					url:"http://127.0.0.1:8090/order/createOrder",
					data:{
						"itemId":GetQueryString("id"),
						"amount":1,
						"promoId":$("#promo_id").val()
						},
					async:true,
					xhrFields:{withCredentials:true},
					success:function(data){
					if(data.status=="success"){
						console.log("下单成功了"+data.data);
						alert("下单成功了");
						window.location.href="itemList.html";
					}else{
						alert("下单失败，原因为"+data.data.Msg);
					}
					},
					error:function(err){
						console.log(err.responseText);
					}
					
				});
					});
			
			});
		</script>
	</body>

</html>